<template>
  <div class="commonSearch">
    <div class="commonSearchBar">
      <div class="barTitle">筛选条件</div>
      <el-row :gutter="20">
        <el-form size="small">
          <slot />

          <el-col :span="24">
            <el-button @click="reset" size="small">重置</el-button>
            <el-button type="primary" @click="search" size="small"
              >搜索</el-button
            >
          </el-col>
        </el-form>
      </el-row>

      <el-divider></el-divider>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    reset() {
      this.$emit("reset");
    },
    search() {
      this.$emit("search", 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.commonSearchBar {
  padding: 0 15px;
  .barTitle {
    position: relative;
    margin-bottom: 15px;
    // padding-left: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #dcdfe6;
    // &::before {
    //   content: " ";
    //   position: absolute;
    //   left: 0;
    //   top: 4px;
    //   width: 1px;
    //   height: 15px;
    //   border-left: 2px solid #1e80ff;
    // }
  }

  .router-tab__header{
    overflow: hidden;
  }
}
</style>
